<template>
  <Card>
    <span slot="title">申报人员信息管理</span>
    <div slot="content">
      <div class="claimant_management">
        <div class="claimant_management_header">
          <el-form :inline="true" :model="searchForm" size="small">
            <el-form-item>
              <el-input
                v-model="searchForm.user"
                placeholder="请输入姓名"
              ></el-input>
            </el-form-item>
            <el-form-item label="工作单位">
              <el-select v-model="searchForm.region" placeholder="请选择">
                <el-option
                  label="深圳木卫二科技有限公司"
                  value="shanghai"
                ></el-option>
                <el-option
                  label="木卫二科技有限公司"
                  value="beijing"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <we-button type="primary" @click="handleSearch" size="small"
                ><i class="el-icon-search"></i> 查询</we-button
              >
              <we-button plain @click="handleReset" size="small">
                <i class="el-icon-refresh"></i> 重置</we-button
              >
            </el-form-item>
          </el-form>
          <div class="button_item">
            <we-button type="primary" size="small"
              ><i style="font-weight: 700" class="el-icon-plus"></i>
              添加</we-button
            >
            <we-button size="small"
              ><i class="el-icon-download"></i> 导入</we-button
            >
            <we-button size="small"
              ><i class="el-icon-upload2"></i> 导出</we-button
            >
            <we-button type="danger" size="small">
              <i class="el-icon-delete-solid"></i> 删除</we-button
            >
          </div>
        </div>
        <!-- 表格 -->
        <div class="claimant_management_table">
          <el-table
            size="mini"
            :data="tableData"
            :header-cell-style="headerStyle"
            @selection-change="handleSelectionChange"
            stripe
            select-on-indeterminate
          >
            <el-table-column type="selection" width="55"> </el-table-column>
            <el-table-column label="申报人">
              <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.name }}</span>
              </template>
            </el-table-column>
            <el-table-column label="登录账号">
              <template slot-scope="scope">
                <span>{{ scope.row.account }}</span>
              </template>
            </el-table-column>
            <el-table-column label="联系电话">
              <template slot-scope="scope">
                <span>{{ scope.row.phone }}</span>
              </template>
            </el-table-column>
            <el-table-column label="注册时间">
              <template slot-scope="scope">
                <span>{{ scope.row.createTime }}</span>
              </template>
            </el-table-column>
            <el-table-column label="工作单位">
              <template slot-scope="scope">
                <span>{{ scope.row.gongzuodanwei }}</span>
              </template>
            </el-table-column>
            <el-table-column label="状态">
              <template slot-scope="scope">
                <span
                  :style="
                    scope.row.status === 1 ? 'color:green' : 'color:orange'
                  "
                  >{{ scope.row.status === 1 ? "正常" : "禁用" }}</span
                >
              </template>
            </el-table-column>
            <el-table-column label="操作" width="230px">
              <template slot-scope="scope">
                <we-button type="primary" size="mini"
                  ><i class="el-icon-edit"></i> 编辑</we-button
                >
                <we-button size="mini" type="primary"
                  ><i class="el-icon-caret-right"></i> 查看</we-button
                >
                <we-button
                  @click="changeStatu(scope.row)"
                  size="mini"
                  :type="scope.row.status === 1 ? 'warning' : 'success'"
                  ><i
                    :class="
                      scope.row.status === 1
                        ? 'el-icon-remove'
                        : 'el-icon-video-play'
                    "
                  ></i>
                  {{ scope.row.status === 1 ? "禁用" : "启用" }}</we-button
                >
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页 -->
          <div class="pagination">
            <we-Pagination
              :page="pagination.pageNum"
              :pageSize="pagination.pageSize"
              :total="pagination.total"
              @currentChange="currentChange($event)"
              @pageSizeChange="pageSizeChange($event)"
            >
              ></we-Pagination
            >
          </div>
        </div>
      </div>
    </div>
  </Card>
</template>

<script>
import Card from "@/components/Card";
import WeButton from "@/components/WeButton";
import WePagination from "@/components/WePagination";
import {
  GetClaimantManagementList, // 获取系统管理申报人管理列表
  changeDisable, // 切换成禁用
  changeUnDisable, // 切换成启用
  getsearchFormList, //查询工作单位最父级列表
} from "@/api/titleDeclaration";
import moment from "moment";
export default {
  components: {
    Card,
    WeButton,
    WePagination,
  },
  data() {
    return {
      searchForm: {
        user: "",
        region: "",
      },
      tableData: [],
      // 勾选项
      multipleSelection: [],
      // 分页数据
      pagination: {
        total: 1, // 总数据条数
        pageSize: 6, // 每页条数
        pageNum: 1, // 当前页
      },
      // 表头样式回调
      headerStyle() {
        return "backgroundColor:#ddd;fontSize:14px;color:#666;fontWeight:700";
      },
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    // 查询
    handleSearch() {
      console.log("submit!");
    },
    // 重置
    handleReset() {
      this.searchForm = {
        user: "",
        region: "",
      };
    },
    changeStatu(data) {
      if (data.status === 1) {
        changeDisable({ uuid: data.uuid });
        this.fetchData();
      } else if (data.status === -1) {
        changeUnDisable({ uuid: data.uuid });
        this.fetchData();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // 获取数据
    async fetchData() {
      // 发送请求 获取申报人列表
      let res = await getDeclarantList({
        pageNum: this.pagination.pageNum,
        pageSize: this.pagination.pageSize,
        // 查询参数
        // departmentName: this.searchForm.departmentName,
      });
      // 解构数据
      let { code, data } = res;

      // 处理时间格式
      data.resList.forEach((item) => {
        item.createTime = moment(item.createTime).format("YYYY-MM-DD");
      });

      // 边界判断
      if (!data.resList.length && this.pagination.pageNum !== 1) {
        this.pagination.pageNum -= 1;
        this.pagination.fetchData();
      }
      // 赋值渲染
      if (code === 200) {
        this.pagination.total = data.totals;
        this.tableData = data.resList;
      }
    },
    // 当前页改变
    currentChange(event) {
      this.pagination.pageNum = event;
      this.fetchData();
    },
    // 每页条数发生改变
    pageSizeChange(event) {
      this.pagination.pageSize = event;
      this.fetchData();
    },
  },
};
</script>

<style lang="less" scoped>
.claimant_management {
  .claimant_management_header {
    display: flex;
    justify-content: space-between;
  }
  .claimant_management_table {
    .pagination {
      display: flex;
      justify-content: flex-end;
      margin-top: 20px;
    }
  }
}
</style>
